<template>
    <ul class="switches flex middle">
    	<li :class="{'active':currentIndex===index}" class="switch-item cell-main" v-for="(item,index) in switches" @click="switchItem(index)">
    		<span>{{item.name}}</span>
    	</li>
    </ul>
</template>

<script type="text/ecmascript-6">
export default{
  name:'',
  props:{
  	switches:{
  		type:Array,
  		default:[]
  	},
  	currentIndex:{
  		type:Number,
  		default:0
  	}
  },
  methods:{
switchItem(index){
  this.$emit('switch',index)
}
  },
  data(){
   return{

  }
},
  components:{}
}
</script>

<style rel="stylesheet" lang="less">
    .switches{
width: 240px;
    margin: 0 auto;
    border: 1px solid #333;
    border-radius: 5px;
    }
    .switch-item{
     padding: 8px;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,0.3);
    &.active{
          background: #333;
    color: #fff;
    }
    }
</style>
